<template>
  <section>
    <el-card class="box-card">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>命令</el-breadcrumb-item>
        <el-breadcrumb-item>新建命令</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="card">
        <el-form
          ref="form"
          :model="form"
          :inline="true"
          label-width="60px"
          label-position="left"
          class="formstyle"
        >
        <!-- 命令 -->
        <el-col :span="12">
          <el-form-item label="命令" prop="code" :rules="[
      { required: true, message: '请输入命令', trigger: 'blur' },]">
            <el-input v-model="form.code" placeholder="命令code" style="width:280px"></el-input>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item label="描述" prop="codedesc" :rules="[
      { required: true, message: '请输入命令描述', trigger: 'blur' },]">
            <el-input v-model="form.codedesc" placeholder="命令描述" style="width:280px"></el-input>
          </el-form-item>
          
            </el-col>
          <!-- 字段 -->  
           <el-col :span="12">          
          <el-form-item                      
            v-for="(name,index) in form.fields"
            :label="'字段'+index"
            :key="name.key"
            :prop="'fields.'+index+'.value'"
            :rules="{required: true, message: '字段不能为空', trigger: 'blur'}"
          >
            <el-input v-model="name.value" placeholder="请输入字段名称" style="width:280px"></el-input>
            <el-button
                @click="removeName(name)"
                 v-if="index>=3"
                type="danger"
                icon="el-icon-remove-outline"
                ></el-button><br>
            </el-form-item>
            <el-form-item label=" ">
              <el-button
              @click="addField"
              type="primary"             
            >添加字段</el-button>
            <el-button @click="submitCommand('form')" type="primary">提交命令</el-button>
          </el-form-item>
            </el-col>
            <el-col :span="12">
            <!-- 字段描述 -->
            <el-form-item           
            v-for="(desc,index) in form.fielddescs"
            :label="'描述'+index"
            :key="desc.key"
            :prop="'fielddescs.'+index+'.value'"
            :rules="{required: true, message: '字段描述不能为空', trigger: 'blur'}"
            >
                <el-input v-model="desc.value" placeholder="请输入字段描述" style="width:280px"></el-input>
                <el-button
                @click="removeDesc(desc)"
                v-if="index>=3"
                type="danger"
                icon="el-icon-remove-outline"
                ></el-button><br>
            </el-form-item>
            </el-col>
          
        </el-form>
      </div>
    </el-card>
  </section>
</template>

<script>
export default {
  data() {
    return {
      form: {
        code: "",
        codedesc: "",
        fields:[],
        fielddescs:[],
        addNameDesc:[],
      },
    };
  },
  methods: {
    removeName(item) {
      var index = this.form.fields.indexOf(item);
      if (index !== 0) {
        this.form.fields.splice(index, 1);
      }
    },
    removeDesc(item){
        var index= this.form.fielddescs.indexOf(item);
        if (index !== 0) {
        this.form.fielddescs.splice(index, 1);
      }
    },
    addField() {
      this.form.fields.push({
        field: "",       
      });
      this.form.fielddescs.push({
          fielddesc: ""
      })
    },
    submitCommand(form){
        this.$refs[form].validate((valid) => {
			if (valid) {
				if(this.form.fields.length!=this.form.fielddescs.length){
						alert("请注意字段名称与字段描述相符");
						return false;
				}else{            
						var i=0;
						for(i=0;i<this.form.fields.length;i++){
							this.form.addNameDesc.push({
								name: this.form.fields[i].value,
								desc:this.form.fielddescs[i].value
							})               
						}
						console.log(this.form.addNameDesc)
						this.axios.post("/api/command", {
							code: this.form.code,
							desc: this.form.codedesc,
							parameters:this.form.addNameDesc,
						})
						.then(response=> {
							console.log(response);
							this.form.addNameDesc=[];
							this.$refs[form].resetFields();
							alert('提交成功！');
						})
						.catch(error=>{
							alert(error);
						});           
					}
			} else {
				console.log('error submit!!');
				return false;
			}
        });
    }
  }
};
</script>


<style>
.box-card {
  text-align: left;
}
.card {
  height: 50vw;
  overflow: auto;
}
.formstyle {
  margin: 3% 0 0 5%;
}
</style>
